// eslint-disable-next-line no-unused-vars
import VXETable, { Column } from 'vxe-table'
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../../../config'

const Bem = createBem(`${tableNamespace}__link`)

VXETable.renderer.add('Link', {
  renderDefault(h, renderOpts, params) {
    const { row, column } = params
    /**
     * @type { { formatter: Function; disabled: Function; onClick:Function; } }
     */
    const { formatter, events = {}, options = {} } = renderOpts
    const { disabled } = options
    const { onClick } = events
    const cellValue = row[column.property]

    /**
     * @return { boolean }
     */
    function isLink() {
      if (disabled) return !disabled({ cellValue, row, column })
      return true
    }

    function handleClick() {
      onClick?.({ cellValue, row, column })
    }

    /**@returns { string } */
    function renderContent() {
      return formatter?.({ cellValue, row, column }) || cellValue
    }
    return [
      <div class={Bem()}>
        {isLink() ? (
          <el-button type="text" size={this.$store.getters.size} onClick={handleClick}>
            {renderContent()}
          </el-button>
        ) : (
          <span>{renderContent()}</span>
        )}
      </div>
    ]
  }
})

/** @type { Column } */
export const options = {
  showOverflow: 'tooltip',
  align: 'center'
}
